import { useState } from "react";

function ColorPick() {
  const [color, setcolor] = useState("#3a8830");
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
      <h1 style={{ margin: "50px" }}>ColorPick</h1>
      <div
        style={{
          backgroundColor: color,
          height: "200px",
          width: "200px",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          marginBottom: "10px",
          borderRadius:'20px'
        }}
      >
        <p>SeletedColor{color}</p>
      </div>
      <input type="color" value={color} onChange={(e) => setcolor(e.target.value)} />
    </div>
  );
}
export default ColorPick;
